<!DOCTYPE html>
<html>

	<head>
		<title>Tiny的地图</title>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="description" content="TinyMap v1.0.0" />
		<meta name="Author" content="Tiny" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<link rel="shortcut icon" type="text/css" href="img/favicon.ico" />
		<link rel="apple-touch-icon" href="img/banner3_03.png" />
		<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css?v=1.0" />
		<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
		<script src="https://webapi.amap.com/maps?v=1.4.6&key=95eba11492d30851c1f3f9227129455c&plugin=AMap.Driving"></script>
		<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
		<style type="text/css">
			.marker {
				color: #ff6600;
				padding: 4px 10px;
				border: 1px solid #fff;
				white-space: nowrap;
				font-size: 12px;
				font-family: "";
				background-color: #0066ff;
			}
			
			.amap-logo {
				opacity: 0;
			}
			
			.amap-copyright {
				opacity: 0;
			}
			#control{
				opacity: 0;
			}
			/*#panel {
	            position: fixed;
	            background-color: white;
	            max-height: 90%;
	            overflow-y: auto;
	            top: 10px;
	            right: 10px;
	            width: 280px;
	        }*/
		</style>
	</head>

	<body>
		<div id="container"></div>
		<div class="button-group">
			<input type="button" class="button" id="control" value="显示/隐藏实时路况" />
		</div>
		<div id="tip"></div>
		<div id="panel"></div>
	</body>

</html>
<script type="text/javascript">
	function loadScript() {
		var marker, map = new AMap.Map('container', {
			resizeEnable: true,
			zoom: 13
		});

		
		//构造路线导航类
		var driving = new AMap.Driving({
			map: map
			//	        panel: "panel"
		});
		map.plugin('AMap.Geolocation', function() {
			var geolocation = new AMap.Geolocation({
				enableHighAccuracy: true, //是否使用高精度定位，默认:true
				timeout: 10000, //超过10秒后停止定位，默认：无穷大
				buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				buttonPosition: 'RB'
			});
			map.addControl(geolocation);
			geolocation.getCurrentPosition();
			AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
			AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
		});
		//解析定位结果
		function onComplete(data) {
			var str = ['定位成功'];
			str.push('经度：' + data.position.getLng());
			str.push('纬度：' + data.position.getLat());
			if(data.accuracy) {
				str.push('精度：' + data.accuracy + ' 米');
			} //如为IP精确定位结果则没有精度信息
			str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
			document.getElementById('tip').innerHTML = str.join('<br>');
		}
		//解析定位错误信息
		function onError(data) {
			document.getElementById('tip').innerHTML = '定位失败';
		}
		//地图中添加地图操作ToolBar插件
		map.plugin(['AMap.ToolBar'], function() {
			//设置地位标记为自定义标记
			var toolBar = new AMap.ToolBar();
			map.addControl(toolBar);
		});
		//实时路况图层
		var trafficLayer = new AMap.TileLayer.Traffic({
			zIndex: 10
		});
		trafficLayer.setMap(map);

		var isVisible = true;
		AMap.event.addDomListener(document.getElementById('control'), 'click', function() {
			if(isVisible) {
				trafficLayer.hide();
				isVisible = false;
			} else {
				trafficLayer.show();
				isVisible = true;
			}
		}, false);
		//获取两点间的距离
		var start = 0,
			end = 0,
			A_lng, A_lat, B_lng, B_lat, count = 0;
		//点击获取坐标位置
		map.on("click", function(e) {
			count++;
			if(start == 0) {
				A_lng = e.lnglat.getLng();
				A_lat = e.lnglat.getLat();
				start = 1;
				end = 0;
				addMarker();
			} else {
				B_lng = e.lnglat.getLng();
				B_lat = e.lnglat.getLat();
				end = 1;
				start = 0;
				addMarker();
			}
			if(end == 1) {
				driving.search(new AMap.LngLat(A_lng, A_lat), new AMap.LngLat(B_lng, B_lat));
			}
		});
		// 实例化点标记
		function addMarker() {
			marker = new AMap.Marker({
				icon: "img/mark_b.png",
				position: [A_lng, A_lat]
			});
			marker.setMap(map);
		}
	}

	window.onload = loadScript();
</script>